<template>
    <div class="w-full">
        <el-form :inline="true" :model="formInline">
            <el-form-item label="问题">
                <el-input v-model="formInline.question" placeholder="问题" clearable></el-input>
            </el-form-item>
            <el-form-item label="答案">
                <el-input v-model="formInline.answer" placeholder="答案" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="renderData()">查询</el-button>
                <el-button type="success" @click="openDialog()">新增</el-button>
                <el-button type="danger" @click="deleteHandle()">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" v-loading="dataListLoading" @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="question" label="问题">
            </el-table-column>
            <el-table-column prop="answer" label="回答">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                    <el-button link type="warning" size="small" @click="openDialog(scope.row)">修改</el-button>
                    <el-button link type="danger" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-affix position="bottom" :offset="60" class="mt-4">
            <el-pagination class="mt-2" size="small" v-model:current-page="formInline.current"
                v-model:page-size="formInline.size" :page-sizes="[15, 20, 50, 100]" :background="true"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="renderData"
                @current-change="renderData" />
        </el-affix>
    </div>
    <el-dialog title="添加或修改" v-model="dialogFormVisible" :width="dialogWidth">
        <el-form :model="formDialog" label-position="top" ref="formRef">
            <el-form-item label="问题">
                <el-input type="textarea" v-model="formDialog.question"></el-input>
            </el-form-item>
            <el-form-item label="回答">
                <el-input type="textarea" v-model="formDialog.answer"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateHandle" :loading="!dialogFormVisible"
                    :loading-icon="loading">确
                    定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const tableData = ref([]);
const current = ref(1);
const size = ref(15);
const total = ref(0);
const formInline = ref({
    current: current.value,
    size: size.value,
    answer: '',
    question: ''
});

const formDialog = reactive({
    id: "",
    answer: '',
    question: ''
});
const formRef = ref(null)
const dataListLoading = ref(false);
const dataListSelections = ref([]);
const dialogFormVisible = ref(false);


const dialogWidth = ref("300px");
//挂载页面
onMounted(() => {
    renderData();
    window.addEventListener("resize", resizeWindow(dialogWidth));
});
// 获取数据列表
const renderData = () => {
    dataListLoading.value = true
    pageQa(formInline.value).then(res => {
        tableData.value = []
        if (res.response.error === 0) {
            current.value = res.response.data.current
            total.value = res.response.data.total
            tableData.value = res.response.data.records
        }
        dataListLoading.value = false
    })
};
// 多选
const selectionChangeHandle = (val) => {
    dataListSelections.value = val
};

const openDialog = (row) => {
    dialogFormVisible.value = true
    if (row) {
        //update
        formDialog.id = row.id
        formDialog.answer = row.answer
        formDialog.question = row.question
    } else {
        //add
        formDialog.id = ""
        formDialog.answer = ""
        formDialog.question = ""
    }
};
// 新增 / 修改
const addOrUpdateHandle = (row) => {
    saveQa(formDialog).then(async (res) => {
        if (res.response.error === 0) {
            ElMessage.success("操作成功")
            dialogFormVisible.value = false
            renderData();
        } else {
            ElMessage.error("操作失败")
        }
    })
};
// 删除
const deleteHandle = (id) => {
    var ids = id ? [id] : dataListSelections.value.map(item => {
        return item.id
    })
    ElMessageBox.confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }
    ).then(() => {
        deleteQa({ ids: ids }).then(async (res) => {
            if (res.response.error === 0) {
                ElMessage.success("删除成功")
                renderData();
            } else {
                ElMessage.error("删除失败")
            }
        })
    })
};

</script>